<template>
  <el-dialog v-model="chatStor.state.showFileSelect" title="选择文件或文件夹">
    <div class="file-selector-body">
        <!-- 左边文件列表 -->
        <div class="file-list">
          <div class="header">
            <el-checkbox @change="toggleSelectAll" v-model="allSelected"
              >全选</el-checkbox
            >
            <div class="count-info">已选{{ selectedFiles.length }}个文件</div>
          </div>
          <el-checkbox-group v-model="selectedFiles" class="file-checkbox-group">
            <div
              v-for="(file, index) in fileStor.state.fileList"
              :key="index"
              class="file-item"
            >
              <el-checkbox :label="file">
                <i class="el-icon-folder"></i> {{ file.fileName }}
              </el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
        <!-- 右边已选文件 -->
        <div class="selected-files">
          <div class="selected-header">
            <h4>已选文件</h4>
            <span class="clear-all" @click="clearSelection">全部移除</span>
          </div>
          <ul>
            <li v-for="(file, index) in selectedFiles" :key="index" class="selected-file-item">
              <i class="el-icon-document"></i> {{ file.fileName }}
            </li>
          </ul>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button  @click="closeDialog">取消</el-button>
        <el-button type="primary"  @click="confirmSelection">确认</el-button>
      </div>  
  </el-dialog>
</template>

<script setup lang="ts">
import {chatStore} from '@/stores/disk/chat';
import { ref } from 'vue';
import {fileStore} from '@/stores/disk/file';
const fileStor = fileStore();
const chatStor = chatStore();


const selectedFiles = ref([]);
const allSelected = ref(false);

//清空已选文件
const clearSelection = () => {
  selectedFiles.value = [];
  allSelected.value = false;
}

//全选
const toggleSelectAll = (val:any) => {
  selectedFiles.value = val? fileStor.state.fileList : [];
}

//关闭弹窗
const closeDialog = () => {
  chatStor.showFileSelectAll(false)
}

//确认选择
const confirmSelection = () => {
  const socket = chatStor.state.socket;
  const fileMessage = {
    fileList: selectedFiles.value,
    type: "send_file",
    receiverId: chatStor.state.currentContact.userOther,
  }
  socket.send(JSON.stringify(fileMessage));
  chatStor.showFileSelectAll(false)
}
</script>

<style scoped>
/* 去除圆角 */
.file-selector-dialog {
  border-radius: 0 !important;
}

.file-selector-body {
  display: flex;
  height: 400px;
  border-top: 1px solid #ebeef5;
}

.file-list,
.selected-files {
  width: 50%;
  padding: 0;
  box-sizing: border-box;
}

.file-list {
  border-right: 1px solid #ebeef5;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid #ebeef5;
}

.count-info {
  font-size: 13px;
  color: #909399;
}

.file-checkbox-group {
  height: calc(100% - 48px);
  overflow-y: auto;
  padding: 8px 0;
}

.file-item {
  height: 36px;
  padding: 0 20px;
  margin: 0;
  display: flex;
  align-items: center;
}

.file-item:hover {
  background-color: #f5f7fa;
}

.selected-files {
  display: flex;
  flex-direction: column;
}

.selected-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #ebeef5;
}

.selected-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.clear-all {
  color: #409eff;
  font-size: 13px;
  cursor: pointer;
}

.selected-file-item {
  height: 36px;
  padding: 0 20px;
  margin: 0;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #606266;
}

.selected-file-item i {
  margin-right: 8px;
  color: #909399;
}

.dialog-footer {
  padding: 16px 20px;
  border-top: 1px solid #ebeef5;
}

/* 调整滚动条样式 */
.file-checkbox-group::-webkit-scrollbar {
  width: 6px;
}

.file-checkbox-group::-webkit-scrollbar-track {
  background: #f5f5f7;
}

.file-checkbox-group::-webkit-scrollbar-thumb {
  background-color: #c0c4cc;
  border-radius: 3px;
}

/* 去除复选框圆角 */
::v-deep .el-checkbox__inner {
  border-radius: 2px !important;
}
</style>